


How to make kakaotalk messages for your fanfics

by M1das



Category: No Fandom
Genre: Fanwork Research & Reference Guides
Language: English
Status: Completed
Published: 2019-10-15
Updated: 2019-10-15
Packaged: 2020-12-16 16:09:23
Rating: General Audiences
Warnings: Creator Chose Not To Use Archive Warnings
Chapters: 1
Words: 387
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/21038993
Author URL: https://archiveofourown.org/users/M1das/pseuds/M1das
Summary: Hi^^ this took me so much time, but it's worth it!





	How to make kakaotalk messages for your fanfics

**Author's Note:**

  * Inspired by [How to Make iOS Text Messages on AO3](https://archiveofourown.org/works/6434845) by [CodenameCarrot](https://archiveofourown.org/users/CodenameCarrot/pseuds/CodenameCarrot), [La_Temperanza](https://archiveofourown.org/users/La_Temperanza/pseuds/La_Temperanza). 

Hi! to do this message you'll have to [create a new work skin](https://archiveofourown.org/skins/new?skin_type=WorkSkin), or add this to the workskin you're already using:

> 
>     #workskin .phone {
>       max-width: 300px;
>       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
>       display: table;
>       margin: auto;
>     }
>     
>     #workskin .name {
>       color: #000000;
>       font-size: .75em;
>       padding-bottom: 1em;
>       padding-top: 20px;
>       margin-left: 1em;
>       margin-bottom: -2.5em;
>       text-align: left;
>       display: table;
>       clear: none;
>     }
>     
>     #workskin img.options {
>       float: right;
>       padding-top: 1px;
>     }
>     
>     #workskin img.icon {
>       width: 40px;
>       height: 40px;
>       float: left;
>       border-radius: 40%;
>       padding-right: .5em;
>     }
>     
>     #workskin img.options {
>       float: right;
>       padding-top: 5px;
>     }
>     
>     #workskin .header {
>       min-width: 300px;
>       background-color: #98BAD5;
>       border-bottom: 0.5px solid #98BAD5;
>       color: #000000;
>       font-weight: bold;
>       padding-bottom: .5em;
>       padding-top: .5em;
>       margin-left: -.5em;
>       margin-right: -.5em;
>       margin-bottom: -2em;
>       text-align: left;
>       text-transform: capitalize;
>       display: table;
>     }
>     
>     #workskin .messagebody {
>       background-color: #98BAD5;
>       display: table;
>       padding-left: 20px;
>       padding-right: 20px;
>       padding-bottom: 20px;
>     }
>     
>     #workskin .text {
>       float: left;
>       color: #000000;
>       margin-left: 50px;
>       margin-right: 0 0 0.5em;
>       border-radius: 1em;
>       padding: 0.5em 1em;
>       background: #FDFFF6;
>       max-width: 75%;
>       clear: both;
>       position: relative;
>     }
>     
>     #workskin .text::after {
>       content: "";
>       position: absolute;
>       left: -.5em;
>       top: 0;
>       width: 0.5em;
>       height: 1em;
>       border-right: 0.5em solid #FDFFF6;
>       border-top-right-radius: 1em 0.5em;
>     }
>     
>     #workskin .rr1 {
>       color: #6A899E;
>       font-size: .75em;
>       float: right;
>       position: relative;
>       clear: both;
>       margin: -15px -1.25em 0.5em 0;
>       padding: 0 1em 0.5em;
>     }
>     
>     #workskin .rr2 {
>       color: #6A899E;
>       font-size: .75em;
>       float: right;
>       position: relative;
>       clear: none;
>       margin: 0px 11px 6px 11px;
>       padding: -10px 200px 0.5em 1em;
>     }
>     
>     #workskin .reply {
>       float: right;
>       color: #000000;
>       margin: 0 0 0.5em;
>       border-radius: 1em;
>       padding: 0.5em;
>       background: #FFE401;
>       max-width: 75%;
>       clear: none;
>       position: relative;
>     }
>     
>     #workskin .reply::after {
>       content: "";
>       position: absolute;
>       right: -.5em;
>       top: 0;
>       width: 0.5em;
>       height: 1em;
>       border-left: 0.5em solid #FFE401;
>       border-top-left-radius: 1em 0.5em;
>     }
>     
>     

  
  
Whenever you want to use this format use this:

> <p class="messagebody">  
<span class="header">← mockup</span><img src="https://live.staticflickr.com/65535/48900916566_319e1e516c_b.jpg" class="options" /><br />  
<br />  
<span class="reply">**CHANGE HERE: MESSAGE SENT** </span><br />  
<span class="rr2"> **TIME: MESSAGE SENT**</span><br />  
<br />  
<img src="**LINK OF THE ICON YOU WANT** " class="icon" />  
<span class="name"> **NAME OF THE CHARACTER YOU'RE SPEAKING TO** </span><br />  
<span class="text">**CHANGE HERE: MESSAGE RECIEVED**</span><br />  
<span class="rr1"> **TIME:MESSAGE RECIEVED**</span><br />  
<br />  
</p>

example of what the messages will look like:

← mockup  
Hey, I made a kakaotalk mockup!   
22:30  
  
Nayeon   
oh really?? I can't believe!  
22:31


End file.
